// 撤场确认
<template>
  <el-row :gutter="6">
    <!-- <myAnnounceDlg @operationSucc="operationState($event)" :configs="myAnnounceDlgConfig"></myAnnounceDlg> -->
    <el-col :span="24" class="col-flex">
      <el-col class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/quality' }">质量控制</el-breadcrumb-item>
          <el-breadcrumb-item>撤场确认</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <!-- 主要操作区域 -->
      <el-col v-loading="config.loading" class="maincont-container">
        <div class="tab-container" v-if="config.tabShow">
          <el-tabs v-model="tabConfig.activeName">
            <el-tab-pane name="todo">
              <span slot="label">
                {{runningtablable}}
                <el-badge
                  v-if="config.todoCount>0"
                  :value="config.todoCount"
                  style="margin-left:2px"
                ></el-badge>
              </span>
              <my-tableX
                :configs="todoConfig.configs"
                :tableData="todoConfig.data"
                @dataEdit="handleTodo"
                v-if="showtasktable && tabConfig.activeName==='todo'"
              ></my-tableX>
              <my-tableX
                :configs="runingTaskConfig.configs"
                :tableData="runingTaskConfig.data"
                @dataAdd="addNewApply"
                @dataView="viewDetail"
                v-if="!showtasktable && tabConfig.activeName==='todo'"
              ></my-tableX>
            </el-tab-pane>
            <el-tab-pane label="历史记录" name="finish">
              <my-tableX
                v-if="tabConfig.activeName==='finish'"
                :configs="completedTaskConfig.configs"
                :tableData="completedTaskConfig.data"
                @dataView="viewDetail"
              ></my-tableX>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="flow-container" v-if="!config.tabShow">
          <div class="flow-step fix">
            <my-stepX :configs="flowConfig.stepConfig"></my-stepX>
          </div>
          <div class="flow-form scrollable">
            <el-form
              ref="flowFormData"
              :validate-on-rule-change="false"
              :model="flowFormData"
              label-width="0px"
              size="small"
              :rules="flowConfig.currentRule"
            >
              <h4 class="form-title">{{flowConfig.formTitle}}</h4>
              <table border="1px" cellpadding="0" cellspacing="0" class="form-data">
                <tr align="center">
                  <td class="form-label" colspan="1" width="10%">标段/勘察单位</td>
                  <td colspan="9" width="90%">
                    <el-input readonly type="text" size="small" v-model="flowFormData.tenders"></el-input>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="1" width="10%">项目编号</td>
                  <td colspan="2" width="20%">
                    <el-input
                      readonly
                      placeholder="自动填写"
                      v-model="flowFormData.subjectId"
                      size="small"
                    ></el-input>
                  </td>
                  <td class="form-label" colspan="2" width="20%">项目名称</td>
                  <td colspan="5" width="50%">
                    <el-input
                      readonly
                      placeholder="自动填写"
                      v-model="flowFormData.subjectId"
                      size="small"
                    ></el-input>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="1" width="10%">工程编号</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="projectId">
                      <el-select
                        v-model="flowFormData.projectId"
                        @change="changeProjectId"
                        placeholder="请选择工程编号"
                        :disabled="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      >
                        <el-option
                          v-for="item in dictData.prolist"
                          :key="item.projectId"
                          :label="item.projectId"
                          :value="item.projectId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">工程名称</td>
                  <td colspan="5" width="50%">
                    <el-input
                      placeholder="自动填写"
                      v-model="flowFormData.projectName"
                      size="small"
                      readonly
                    ></el-input>
                  </td>
                </tr>
                <!-- <tr align="center">
                  <td class="form-label" colspan="1" width="10%">工程编号</td>
                  <td colspan="2" width="20%">
                    <el-input
                      readonly
                      placeholder="自动填写"
                      v-model="flowFormData.projectId"
                      size="small"
                    ></el-input>
                  </td>
                  <td class="form-label" colspan="2" width="20%">工程名称</td>
                  <td colspan="5" width="50%">
                    <el-form-item label-width="0" :show-message="true" prop="projectName">
                      <el-select
                        v-model="flowFormData.projectName"
                        @change="changeProjectName"
                        placeholder="请选择工程"
                        :disabled="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      >
                        <el-option
                          v-for="item in dictData.prolist"
                          :key="item.projectName"
                          :label="item.projectName"
                          :value="item.projectName"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                </tr>-->
                <tr align="center">
                  <td class="form-label" colspan="1" width="10%">申请人</td>
                  <td colspan="1" width="10%">
                    <el-form-item label-width="0" :show-message="true" prop="applicant">
                      <el-input
                        v-model="flowFormData.applicant"
                        size="small"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="1" width="10%">撤场时间</td>
                  <td colspan="2" width="20%">
                    <el-form-item label-width="0" :show-message="true" prop="leaveTime">
                      <el-date-picker
                        v-model="flowFormData.leaveTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        :picker-options="pickerOptions"
                        :disabled="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-date-picker>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="1" width="10%">确认人</td>
                  <td colspan="1" width="10%">
                    <el-form-item label-width="0" :show-message="true" prop="replier">
                      <el-input
                        size="small"
                        v-model="flowFormData.replier"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_2||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="1" width="10%">确认时间</td>
                  <td colspan="2" width="20%">
                    <el-input readonly type="text" size="small" v-model="flowState.time"></el-input>
                  </td>
                </tr>

                <tr align="center">
                  <td class="form-label" colspan="1" width="10%">勘察总体意见</td>
                  <td colspan="9" width="90%">
                    <el-form-item label-width="0" :show-message="true" prop="message">
                      <el-input
                        type="textarea"
                        rows="20"
                        v-model="flowFormData.message"
                        size="small"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_2||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
              </table>
              <el-form-item class="btns">
                <el-button
                  v-if="!flowConfig.formState.readonly"
                  @click="resolveflow"
                  type="primary"
                >{{flowConfig.currentBtn.resolveText}}</el-button>
                <el-button @click="cancelflow">{{flowConfig.currentBtn.cancelText}}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>


<script>
import myTableX from "@/components/base/tableX";
import myStepX from "@/components/base/stepX";
import { formatDate } from "@/utils/date";
// import myAnnounceDlg from "@/components/base/announceDlg";
// import httpfile from "@/api/file/index";
// import fileType from "@/config/file.type.config";
// 全局变量
var glbVar = {};
var taskListParam = {};

var refRoles = [];

export default {
  inject: ["reload"],
  components: {
    myTableX,
    myStepX
    // myAnnounceDlg
  },

  // 初始化
  created() {
    glbVar.subjectId = this.$store.state.projectInfo.projectName;
    glbVar.user = this.$store.state.m_user.userInfo;
    this.flowFormData.subjectId = glbVar.subjectId;
    this.flowTaskData.userid = glbVar.user.id;
    this.flowTaskData.path = this.$route.path;

    // 初始化工程数据列表？？？

    this.$api.project
      .listByCompany(glbVar.subjectId, glbVar.user.company)
      .then(res => {
        console.log(res);
        if (res.code === 200) {
          this.dictData.prolist = res.data;
        }
      });

    // let query = this.$route.query;
    // if (query !== {} && query.todo) {
    //   console.log(query);

    //   this.config.tabShow = false;
    //   this.$api.finishconfirm
    //     .getonly({ id: query.id })
    //     .then(res => {
    //       if (res.code === 200) {
    //         this.handleTodo(res.data);
    //       } else {
    //         console.log("get todo business detail:" + res.msg);
    //       }
    //     })
    //     .catch(err => {
    //       console.log("get todo business detail:" + err);
    //       this.$message.info("get todo business detail:" + err);
    //     });
    // }

    let query = this.$route.query;
    if (Object.keys(query).length != 0) {
      this.config.tabShow = false;
      if (query.todo) {
        this.$api.finishconfirm
          .getonly({ id: query.id })
          .then(res => {
            if (res.code === 200) {
              this.handleTodo(res.data);
            } else {
              console.log("get todo business detail:" + res.msg);
            }
          })
          .catch(err => {
            console.log("get todo business detail:" + err);
            this.$message.info("get todo business detail:" + err);
          });
      } else {
        this.$api.finishconfirm
          .getonly({ id: query.remark })
          .then(res => {
            if (res.code === 200) {
              this.viewDetail(res.data);
            } else {
              console.log("get todo business detail:" + res.msg);
            }
          })
          .catch(err => {
            console.log("get todo business detail:" + err);
            this.$message.info("get todo business detail:" + err);
          });
      }
    }
  },

  mounted() {
    console.log("mount 刷新了");

    console.log();

    taskListParam = {
      projectId: glbVar.subjectId,
      businessType: "9",
      userId: glbVar.user.id
    };

    this.initList();
  },

  watch: {
    $route(to, from) {
      if (to.path === from.path && to.query !== from.query) {
        this.initList();
      }
    }
  },

  data() {
    let glbcolumns = [
      { field: "tenders", name: "标段" },
      { field: "projectId", name: "工程编号" },
      { field: "projectName", name: "工程名称" },
      { field: "leaveTime", name: "撤场时间" }
    ];
    return {
      //filetype: fileType.finishconfirm,
      //文件上传
      //   dialogImageUrl: "",
      //   dialogVisible: false,
      //   fileList: [],

      //tab标签的lable

      progressInfo: {},

      runningtablable: "我的待办",

      //切换第一个tab中表格
      showtasktable: true,

      // 时间选择器逻辑
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },

      config: {
        tabShow: true,
        todoCount: 0,
        loading: false
      },
      tabConfig: {
        activeName: "todo"
      },
      todoConfig: {
        configs: {
          nodata: "暂无待办事项",
          columns: glbcolumns,
          showFilterRow: {
            show: true
          },
          operationBtn: {
            show: true
            // add: true,
            // addtext: "发起检查"
          },
          operationCol: {
            show: true,
            edit: true,
            options: {
              edit: {
                text: "处理"
              }
            }
          }
        },
        data: []
      },
      runingTaskConfig: {
        configs: {
          nodata: "暂无运行记录",
          columns: glbcolumns,
          showFilterRow: {
            show: true
          },
          operationBtn: {
            show: true,
            add: true,
            addtext: "发起撤场申请"
          },
          operationCol: {
            show: true,
            view: true,
            options: {
              view: {
                text: "详情"
              }
            }
          }
        },
        data: []
      },

      completedTaskConfig: {
        configs: {
          nodata: "暂无历史记录",
          columns: glbcolumns,
          showFilterRow: {
            show: true
          },
          operationBtn: {
            show: false
          },
          operationCol: {
            show: true,
            view: true,
            options: {
              view: {
                text: "详情"
              }
            }
          }
        },
        data: []
      },

      //公告
      myAnnounceDlgConfig: {
        dialogFormVisible: false,
        isupdate: false,
        announceInfo: {
          remark: "",
          subject_id: "",
          url: "",
          notice_type: "撤场确认",
          role: [],
          create_by: "",
          create_time: "",
          notice_content: "",
          notice_title: "撤场确认完成",
          path: "",
          remark: ""
        }
      },

      flowState: {
        step: 0,
        executionId: null,
        flowNodeId: null,
        message: "",
        parent: 0,
        procInstId: null,
        userid: null
      },

      flowConfig: {
        stepConfig: {
          active: 0,
          processstatus: "process",
          sequence: [],
          data: [
            { flow_node_name: "勘察单位发起撤场申请", description: "" },
            { flow_node_name: "勘察总体确认撤场申请", description: "" }
          ]
        },
        formTitle: "撤场确认申请表",
        currentRule: {},
        currentBtn: {
          resolveText: "发起",
          cancelText: "返回"
        },
        rules: {
          node_1: {
            projectId: [{ required: true, trigger: "change" }],
            leaveTime: [{ required: true, trigger: "change" }]
            // inspectPerson: [{ required: true, trigger: "blur" }]
          },
          node_2: {
            replier: [{ required: true, trigger: "blur" }],
            message: {
              required: true,
              message: "请填写意见",
              trigger: "blur"
            }
          }
        },
        formState: {
          readonly: false
        }
      },

      // 数据字典数据
      dictData: {
        //工程列表
        prolist: []
      },

      currRecordTime: "",

      flowFormData: {},
      formDataDetail: [],
      //flowComments: [],

      flowTaskData: {
        businessid: null,
        businesstype: 9,
        major: "",
        userid: null
      }
    };
  },

  methods: {
    initList() {
      if (glbVar.user.roleId != 3) {
        this.runingTaskConfig.configs.operationBtn.add = true;
        this.runningtablable = "申请撤场";
        this.showtasktable = false;
      } else {
        this.showtasktable = true;
      }

      // 初始化列表
      this.$api.startitem
        .getmytasklist(taskListParam)
        .then(res => {
          if (res.code === 200) {
            if (!res.data || res.data.length === 0) {
              this.todoConfig.data = [];
              this.$message.info("暂无待办事项");
              return;
            }
            console.log(res);

            this.$api.finishconfirm
              .getlist({ ids: res.data })
              .then(res => {
                if (res.code === 200) {
                  this.todoConfig.data = res.data;
                } else {
                  console.log("get todo business detail:" + res.msg);
                }
              })
              .catch(err => {
                console.log("get todo business detail:" + err);
                this.$message.info("get todo business detail:" + err);
              });
          } else {
            console.log("get todo ids res:" + res.msg);
          }
        })
        .catch(err => {
          console.log("get todo ids res:" + err);
        });

      this.$api.startitem
        .getprocessinglist(taskListParam)
        .then(res => {
          if (res.code === 200) {
            console.log("lenght:" + res.data.length);

            if (!res.data || res.data.length === 0) {
              this.runingTaskConfig.data = [];
              return;
            }
            this.$api.finishconfirm
              .getlist({ ids: res.data })
              .then(res => {
                if (res.code === 200) {
                  this.runingTaskConfig.data = res.data;
                } else {
                  console.log("get runing business detail:" + res.msg);
                }
              })
              .catch(err => {
                console.log("get runing business detail:" + err);
                this.$message.info("get runing business detail:" + err);
              });
          }
        })
        .catch(err => {
          console.log("get runing ids res:" + err);
        });
      this.$api.startitem
        .getfinishedlist(taskListParam)
        .then(res => {
          if (res.code === 200) {
            if (!res.data || res.data.length === 0) {
              this.completedTaskConfig.data = [];
              return;
            }
            this.$api.finishconfirm
              .getlist({ ids: res.data })
              .then(res => {
                if (res.code === 200) {
                  this.completedTaskConfig.data = res.data;
                } else {
                  console.log("get finished business detail:" + res.msg);
                }
              })
              .catch(err => {
                console.log("get finished business detail:" + err);
                this.$message.info("get finished business detail:" + err);
              });
          }
        })
        .catch(err => {
          console.log("get finished business detail:" + err);
        });
    },

    //监听上传公告结果
    operationState(msg) {
      console.log(msg);
      if (msg) {
        this.$message.success("发布成功");
        this.config.tabShow = true;
      } else {
        this.$message.error("发布失败");
      }
      this.initList();
      this.config.loading = false;
    },
    /**
     * @description: 发起一个变更申请,预操作
     */
    addNewApply() {
      this.flowConfig.formState.readonly = false;
      this.flowConfig.stepConfig.active = 0;
      this.config.tabShow = false;
      this.flowConfig.currentRule = this.flowConfig.rules.node_1;
      this.flowFormData.tenders =
        glbVar.user.nick_name + "/" + glbVar.user.company;
      this.flowFormData.subjectId = glbVar.subjectId;
      this.flowFormData.subjectName = glbVar.subjectId;
    },

    /**
     * @description: 处理待办任务
     */
    handleTodo(row) {
      // this.currRecordTime = row.recordingDate;
      let id = row.id;
      this.flowFormData = row;

      console.log(row);

      this.$api.nodeprogress
        .query({
          subject_id: row.subjectId,
          project_id: row.projectId
        })
        .then(res => {
          if (res.code === 200) {
            if (res.data && res.data.length > 0) {
              this.progressInfo = {
                id: res.data[0].id,
                field_work: ""
              };
            }
          }
        });

      // 初始化公告默认角色列表
      this.$api.startitem.getRoleByRuningInfo(9, id).then(res => {
        if (res.code === 200) {
          refRoles = res.data;
        }
      });

      this.$api.startitem
        .getworkflow({
          businessType: 9,
          businessId: id
        })
        .then(res => {
          if (res.code === 200) {
            let { id, proc_inst_id } = res.data;
            this.$api.startitem
              .getcurrentstage({
                executionId: id,
                procInstId: proc_inst_id
              })
              .then(res => {
                if (res.code === 200) {
                  this.flowConfig.formState.readonly = false;
                  this.flowConfig.stepConfig.active = res.data[0];
                  this.changeStep(res.data[0]);
                  this.flowState.executionId = id;
                  this.flowState.flowNodeId = res.data[1];
                  this.flowState.message = "";
                  this.flowState.parent = 0;
                  this.flowState.procInstId = proc_inst_id;
                  this.flowState.time = formatDate(
                    new Date(),
                    "yyyy-MM-dd hh:mm:ss"
                  );
                  this.flowState.userid = glbVar.user.id;

                  this.config.tabShow = false;
                }
              });
          }
        });
    },

    // 查看流程运行详情,运行时
    viewDetail(row) {
      // console.log(row);
      let id = row.id;
      this.flowFormData = row;
      // this.initComments(id);
      //读取评论
      this.$api.startitem
        .getcomment({
          businessId: id,
          businessType: 9
        })
        .then(res => {
          console.log("我是评论");
          console.log(res);

          if (res.code === 200) {
            this.flowFormData.message = res.data[0].message;
            this.flowFormData.replier = res.data[0].approver;
            this.flowState.time = res.data[0].time;
          }
        });

      this.$api.startitem
        .getworkflow({
          businessType: 9,
          businessId: id
        })
        .then(res => {
          if (res.code === 200) {
            let { id, proc_inst_id } = res.data;
            this.$api.startitem
              .getcurrentstage({
                executionId: id,
                procInstId: proc_inst_id
              })
              .then(res => {
                if (res.code === 200) {
                  this.flowConfig.formState.readonly = true;
                  this.flowConfig.stepConfig.active = res.data[0];
                  this.changeStep(res.data[0]);
                  this.config.tabShow = false;
                }
              });
          }
        });
    },

    changeStep(step) {
      console.log("step:" + step);
      this.flowState.step = step;
      this.flowConfig.currentRule = this.flowConfig.rules["node_" + (step + 1)];

      if (step === 0) {
        this.flowConfig.currentBtn = {
          resolveText: "发送",
          cancelText: "返回"
        };
      } else {
        this.flowConfig.currentBtn = {
          resolveText: "确认",
          cancelText: "取消"
        };
      }
    },
    changeProjectId(value) {
      this.dictData.prolist.forEach(item => {
        if (item.projectId === value) {
          this.flowFormData.projectName = item.projectName;
          this.flowTaskData.major = item.major;

          this.flowFormData.major = item.major;

          this.kcdwnameData.forEach((it, index) => {
            if (it.tenders === item.tenders) {
              this.flowTaskData.userid = it.userId;
            }
          });

          return;
        }
      });
    },
    // changeProjectName(value) {
    //   this.dictData.prolist.forEach(item => {
    //     if (item.projectName === value) {
    //       console.log(item);
    //       this.flowFormData.projectId = item.projectId;
    //       this.flowFormData.major = item.major;

    //       this.flowTaskData.major = item.major;
    //       return;
    //     }
    //   });
    // },

    // 执行流程
    resolveflow() {
      // 预验证
      this.$refs.flowFormData.validate(res => {
        if (res) {
          this.$confirm("提交操作后不可更改，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.handleResolve();
            })
            .catch(() => {
              return;
            });
        } else {
          this.$message.warning("请检查必填项");
        }
      });
    },

    handleResolve() {
      if (this.flowState.step === 0) {
        this.config.loading = true;
        console.log("我是结果表");
        console.log(this.flowFormData);

        this.$api.finishconfirm
          .add(this.flowFormData)
          .then(res => {
            console.log(res);
            if (res.code === 200) {
              this.flowTaskData.businessid = res.data.id;
              this.$api.startitem
                .starttask(this.flowTaskData)
                .then(res => {
                  this.config.loading = false;
                  console.log(res);

                  if (res.code === 200) {
                    this.$message.success("发送成功：已发送至标段");
                    this.config.tabShow = true;
                    this.initList();
                  } else {
                    this.$message.error("发送失败：" + res.msg);
                  }
                })
                .catch(err => {
                  this.$message.error("发送失败：" + err);
                });
            } else {
              this.config.loading = false;
              this.$message.error("提交表单失败:" + res.msg);
            }
          })
          .catch(err => {
            this.config.loading = false;
            this.$message.error("提交表单失败:" + err);
          });
      } else {
        // 走审批接口
        this.flowState.approver = this.currApproveInfo.approver;
        this.flowState.message = this.flowFormData.message;
        this.$api.startitem.approve([this.flowState]).then(res => {
          console.log("approve param");
          console.log(this.flowState);
          if (res.code === 200) {
            this.progressInfo.field_work = formatDate(
              new Date(),
              "yyyy-MM-dd hh:mm:ss"
            );
            this.$api.nodeprogress
              .update(this.progressInfo)
              .then(res => {
                if (res.code === 200) {
                  console.log("更改实际外业完成时间成功");
                  this.$message.success("更改实际外业完成时间成功");
                }
              })
              .catch(err => {
                console.log("更改实际外业完成时间失败");
                this.$message.success("更改实际外业完成时间失败" + err);
              });
            this.$message.success("操作成功");
            if (this.flowState.step === 1) {
              //添加公告
              // this.myAnnounceDlgConfig.isupdate = false;
              // this.myAnnounceDlgConfig.announceInfo.create_by =
              //   "勘察总体-" + this.flowState.approver;
              // this.myAnnounceDlgConfig.announceInfo.remark = this.flowFormData.id;
              // this.myAnnounceDlgConfig.announceInfo.subject_id =
              //   glbVar.subjectId;
              // this.myAnnounceDlgConfig.announceInfo.notice_content = "撤场确认";
              // this.myAnnounceDlgConfig.dialogFormVisible = true;
              // this.myAnnounceDlgConfig.announceInfo.notice_title =
              //   "【" +
              //   this.flowFormData.tenders.split("/")[0] +
              // 	"】撤场确认完成";

              let announce = {
                subject_id: glbVar.subjectId,
                url: "",
                remark: this.flowFormData.id,
                notice_type: "撤场确认",
                role: refRoles,
                create_by: this.flowState.approver,
                create_time: this.flowState.time,
                notice_content:
                  "【" +
                  this.flowFormData.tenders.split("/")[0] +
                  "】撤场确认完成",
                notice_title:
                  "【" +
                  this.flowFormData.tenders.split("/")[0] +
                  "】撤场确认完成",
                path: this.$route.path
              };

              this.$api.announce
                .add(announce)
                .then(res => {
                  this.config.loading = false;
                  if (res.code == 200) {
                    this.$message.success("操作成功!");
                    this.config.tabShow = true;
                    if (!this.$route.query.id) {
                      this.initList();
                    } else {
                      this.$router.replace({
                        path: this.$route.path,
                        query: {}
                      });
                    }
                  } else {
                    this.$message.error("操作失败!" + res.msg);
                  }
                })
                .catch(err => {
                  this.config.loading = false;
                  this.$message.error("操作失败!" + err);
                });
            } else {
              this.config.tabShow = true;
              if (!this.$route.query.id) {
                this.initList();
              } else {
                this.$router.replace({
                  path: this.$route.path,
                  query: {}
                });
              }
            }
            // this.config.tabShow = true;
            // if (this.$route.query === {}) {
            //   this.initList(taskListParam);
            // } else {
            //   this.$router.replace({
            //     path: this.$route.path,
            //     query: {}
            //   });
            //   this.initList(taskListParam);
            // }
          }
        });
      }
    },

    // 取消流程
    cancelflow() {
      this.config.tabShow = true;
      this.flowFormData = {};
    }
  },

  computed: {
    currApproveInfo() {
      let index = this.flowState.step;
      if (index === 1) {
        return {
          approver: this.flowFormData.replier
        };
      } else {
        return {
          approver: this.flowFormData.inspectPerson
        };
      }
    }
  }
};
</script>



<style lang='less' scoped>
.col-flex {
  box-sizing: border-box;
  padding-top: 30px;
  height: 100%;

  .breadcrumb-container {
    height: 30px;
    margin-top: -20px;
  }

  .maincont-container {
    height: 100%;
    margin-top: 3px;
    .tab-container {
      height: 100%;
      /deep/.el-tabs {
        height: 100%;

        .el-tabs__header {
          margin: 0;
        }
        .el-tabs__content {
          height: calc(~"100% - 40px");
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .flow-container {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding-top: 60px;

      .flow-step {
        width: 100%;
        height: 60px;
        margin-top: -60px;
      }

      .flow-form {
        text-align: center;
        height: calc(~"100% - 10px");
        // height: 100%;

        table .form-label {
          background-color: #efefef;
        }

        .form-title {
          margin: 10px !important;
        }

        .form-data {
          border-collapse: collapse;
          margin: auto;
          width: 70%;
          font-size: 13px;
        }
        .btns {
          width: 70%;
          margin: 20px auto;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }

  .scrollable {
    overflow: auto;
  }

  /deep/.el-form-item {
    padding: 0px;
    margin: 0px;
    .el-form-item__content {
      line-height: normal;
    }
    .el-select {
      display: block;
    }
  }
}
</style>